<template>
	<view class="box">
		<view class="cont">
			<view class="top">
				<view class="info">
					<text class="name">{{lastname}}</text>
					<text class="cell">{{sex}}</text>
					<text class="telephone">{{phone}}</text>
				</view>
				<view class="landlord">
					{{types==1?'二手房':'租房'}}
				</view>
			</view>
			<view class="area">
				<ColorfulLabel :labelArr="label"></ColorfulLabel>
			</view>
		</view>

		<view class="conta">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						邀约日期:
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<view class="conta">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						开始时间:
					</view>
					<view class="uni-list-cell-db">
						<picker mode="time" :value="time" start="" end="" @change="bindTimeChange">
							<view class="uni-input">{{time}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="conta">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						结束时间:
					</view>
					<view class="uni-list-cell-db">
						<picker mode="time" :value="endtime" :start="time" end="" @change="endbindTimeChange">
							<view class="uni-input">{{endtime}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>




		<!-- 房源信息 -->
		<view class="contss">
			<view class="look">
				带看房源
			</view>
			<view class="content" v-for="(item,index) in arr" :key="index">
				<image :src="item.img" mode="" class="tu"></image>
				<view class="brief">
					<view class="title">
						{{item.title}}
					</view>
					<view class="areas">
						<text>{{item.room}}室{{item.hall}}厅</text>
						<text>/</text>
						<text>{{item.building_area||item.house_area}}</text>㎡
						<text>/</text>
						<text>{{item.orientation}}</text>
						<text>{{item.community_name}}</text>
					</view>

					<view class="">
						<view class="lablebox">
							<ColorfulLabel :labelArr="item.label"></ColorfulLabel>
						</view>
						<view class="pricebox">
							<view class="total" v-if="item.type==1">
								<text>{{item.price}}万</text>
							</view>
							<view class="price" v-if="item.type==1">
								{{item.unit_price}}元/㎡
							</view>
							<view class="price" v-if="item.type==2">
								{{item.price}}元/月
							</view>
						</view>
					</view>
				</view>

				<view class="cancel" @click="cancel(index)">
					取消
				</view>
			</view>
			<view class="add" @click="add">
				+
			</view>
		</view>


		<!-- 时间 -->
		<view class="test">
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="ed" @cancel="ed" />


		<view class="invite" @click="offer">
			邀约客户
		</view>
	</view>
</template>

<script>
	import MxDatePicker from "../../components/mx-datepicker/mx-datepicker.vue"
	import ColorfulLabel from "../../components/ColorfulLabel/index.vue"
	import {
		getoffer
	} from "../../api/api/index.js"
	import {
		getfollowup
	} from "../../api/api/index.js"

	function getNow() {
		let date = new Date()
		return date.getFullYear() + '-' + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() +
			1)) + '-' + (date.getDate() > 10 ? date.getDate() : '0' + date.getDate())
	}
	export default {

		data() {
			return {
				arr: [],
				// 时间
				showPicker: false,
				rangetime: [],
				types: 0,
				value: '',
				lastname: "",
				sex: "",
				phone: '',
				type: "",
				label: [],
				id: 0,
				house_id: '',
				time: '08:00',
				date: getNow(),
				endtime: '22:00',
				save: 0
			}
		},
		methods: {
			// 时间选择器
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			endbindTimeChange: function(e) {
				this.endtime = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			add() {
				let addarrlen = uni.getStorageSync("addarr")
				if (addarrlen.length >= 3) {
					uni.showToast({
						title: "已经有三套房了",
						icon: "none",
						duration: 1500
					})
				} else {
					this.jumpLink({
						link: "/pages/addhouse/index",
						query: {
							type: this.types,
							id: this.id
						}
					})
				}

			},

			// 时间
			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
				}
			},
			// 邀约客户
			offer() {
				let houseid = []
				for (let i = 0; i < this.arr.length; i++) {
					let x = this.arr[i].id
					houseid.push(x)
				}
				let start_time = this.date + " " + this.time
				let end_time = this.date + " " + this.endtime
				let data = {
					id: this.id,
					start_time: start_time,
					end_time: end_time,
					house_id: houseid.join("|")
				}
				if (this.arr.length > 0) {
					getoffer(data).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1500
						})
						uni.setStorageSync("addarr", [])
						setTimeout(function() {
							uni.redirectTo({
								url: "../takelookat/index"
							})
						}, 1500);

					})

				} else {
					uni.showToast({
						title: "邀约数据不完整",
						icon: "none",
						duration: 1500
					})
				}
			},
			// 取消房源
			cancel(index) {
				this.arr.splice(index, 1)
				uni.setStorageSync("addarr", this.arr)
			}
		},
		components: {
			MxDatePicker,
			ColorfulLabel,
			ColorfulLabel
		},
		onLoad(e) {
			let that = this
			let localarr = uni.getStorageSync("addarr")
			if (localarr.length != 0 && e.save == "1") {
				uni.setStorageSync("addarr", [])
				that.arr = []
				// uni.showModal({
				// 	title: '提示',
				// 	content: '是否保留之前数据',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			that.arr=localarr
				// 		} else if (res.cancel) {
				// 			uni.setStorageSync("addarr", [])
				// 			that.arr=[]
				// 		}
				// 	}
				// })
			}
			getfollowup({
				id: e.id
			}).then(res => {
				let infosr = res.data
				this.lastname = infosr.contact
				this.phone = infosr.contact_number
				this.types = infosr.type
				this.id = infosr.id
			})


		},
		onShow() {
			let localarr = uni.getStorageSync("addarr")
			this.arr = localarr
		}
	}
</script>

<style>
	.uni-list-cell {
		display: flex;
		align-items: center;
	}

	.uni-input {
		width: 500rpx;
	}

	.box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #EFEFEF;
	}

	.cont {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 21rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}

	.top {
		display: flex;
		justify-content: space-between;

	}

	.info {
		margin-top: 34rpx;
		margin-left: 35rpx;
	}

	.name {
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		font-weight: 700;
		color: #000000;
	}

	.cell {
		font-family: MicrosoftYaHei-Bold;
		font-size: 22rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		color: #666666;
		margin-left: 24rpx;
	}

	.telephone {
		font-family: PingFang-SC-Heavy;
		font-size: 22rpx;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #666666;
		margin-left: 24rpx;
	}

	.landlord {
		width: 101rpx;
		height: 40rpx;
		background-color: #ffe8e4;
		border-radius: 20rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fd5a57;
		margin-top: 28rpx;
		margin-right: 26rpx;
	}

	.area {
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #333333;
		margin-top: 38rpx;
		margin-left: 33rpx;
		margin-bottom: 24rpx;
	}

	.conts {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 21rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.conta {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 21rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.invitationtime {
		font-size: 26rpx;
		color: #000000;
		font-family: MicrosoftYaHei;
	}

	.selecttime {
		font-size: 20rpx;
		color: #b1b1b1;
		font-family: MicrosoftYaHei;
		margin-left: 56rpx;
	}

	.conts>image {
		width: 40rpx;
		height: 43rpx;
	}



	/* 房源 */
	.contss {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 21rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
	}

	.look {
		font-family: MicrosoftYaHei-Bold;
		font-size: 36rpx;
		color: #000000;
		font-weight: 700;
		margin-bottom: 37rpx;
	}

	.content {
		display: flex;
		margin-bottom: 44rpx;
		align-items: center;
	}

	.tu {
		width: 208rpx;
		height: 169rpx;
		border-radius: 10rpx;
	}

	.content>.brief {
		margin-left: 35rpx;
		width: 400rpx;
	}

	.brief>.title {
		font-size: 28rpx;
		color: #282828;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		font-stretch: normal;
	}

	.brief>.areas {
		font-size: 22rpx;
		color: #878787;
		font-family: MicrosoftYaHei-Bold;
		margin-top: 10rpx;
	}

	.brief>.areas>text {
		margin-right: 10rpx;
	}

	.lablebox {
		display: flex;
	}

	.labeone {
		width: 71rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffdddc;
		font-size: 18rpx;
		display: inline-block;
		color: rgb(210, 73, 89);
	}

	.labletwo {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffefdc;
		font-size: 18rpx;
		color: #d88e35;
		margin-left: 7rpx;
	}

	.lablethree {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		background-color: #dcf8ff;
		border-radius: 16rpx;
		font-size: 18rpx;
		color: #33b1d0;
		margin-left: 7rpx;
	}

	.pricebox {
		display: flex;
		margin-top: 10rpx;
		/* margin-right: 34rpx; */
	}

	.total {
		color: #e13c35;
		font-size: 18rpx;
		font-family: MicrosoftYaHei;
		margin-right: 34rpx;
	}

	.total>text {
		font-size: 30rpx;
		font-weight: 700;
		font-family: PingFang-SC-Heavy;
		margin-right: 10rpx;
	}

	.price {
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #666666;
		margin-top: 12rpx;
	}

	.add {
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		border: solid 3rpx #e13c35;
		color: #e13c35;
		font-size: 60rpx;
		font-weight: 700;
		text-align: center;
		line-height: 80rpx;
	}

	.invite {
		height: 90rpx;
		background-color: #fc7b63;
		border-radius: 5rpx;
		line-height: 90rpx;
		text-align: center;
		font-family: MicrosoftYaHei;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 80rpx;
		color: #ffffff;
		left: 23rpx;
		right: 27rpx;
		position: fixed;
		bottom: 19rpx;
		display: inline-block;
	}

	.cancel {
		width: 100rpx;
		height: 50rpx;
		background-color: #e13c35;
		line-height: 50rpx;
		text-align: center;
		border-radius: 20rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}
</style>
